<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>生鲜超市-首页</title>
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/main.css" />
		<link rel="stylesheet" href="/css/element.css" />
	</head>

	<body>
		<div id="app">
			<!--头部导航菜单-->
			<div class="header_con">
				<div class="header">
					<div class="welcome fl">欢迎来到生鲜超市!</div>

					<div class="fr">
						<div class="login_info fl" v-if="isLogin">
							欢迎您：<em>{{user.nickname}}</em>
							<span>&emsp;|&emsp;</span>
						</div>

						<div class="login_btn fl" v-if="!isLogin">
							<a href="/login.html">登录</a>
							<span>|</span>
							<a href="/register.html">注册</a>
						</div>

						<div class="user_link fl" v-else>
							<a href="/html/cart.html">我的购物车</a>
							<span>|</span>
							<a href="/html/user_center.html">用户中心</a>
							<span>|</span>
							<a href="javascript:;" @click="logout">退出登录</a>
						</div>
					</div>
				</div>
			</div>

			<div class="search_bar clearfix">
				<a href="/" class="logo fl">
					<img src="/images/logo.jpg" height="94px" style="margin-top: -15px"/>
				</a>

				<div class="search_con fl">
					<input class="input_text fl" v-model="search" placeholder="搜索商品" />
					<input type="button" class="input_btn fr" value="搜索" @click="select" />
				</div>

				<div class="guest_cart fr">
					<a href="/html/cart.html" class="cart_name fl">我的购物车</a>
					<div class="goods_count fl">{{count}}</div>
				</div>
			</div>

			<div class="navbar_con">
				<div class="navbar">
					<h1 class="fl">全部商品分类</h1>

					<ul class="navlist fl">
						<li><a href="/">首页</a></li>
						<!--<li class="interval">|</li>
						<li><a href="/">手机生鲜</a></li>
						<li class="interval">|</li>
						<li><a href="/">抽奖</a></li>-->
					</ul>
				</div>
			</div>

			<div class="center_con clearfix">
				<ul class="subnav fl">
					<li v-for="c in categories">
						<a :href="'#model0' + c.id" :class="c.cls">{{c.name}}</a>
					</li>
				</ul>

				<div class="slide fl">
					<el-carousel :interval="5000" arrow="always">
						<el-carousel-item v-for="banner in banners">
							<img :src="banner.url" alt="幻灯片" />
						</el-carousel-item>
					</el-carousel>
				</div>

				<div class="adv fl">
					<a href="javascript:;"><img src="/adv/01.jpg" alt="" /></a>
					<a href="javascript:;"><img src="/adv/02.jpg" alt="" /></a>
				</div>
			</div>

			<div class="list_model" v-for="category in categories">
				<div class="list_title clearfix">
					<h3 class="fl" :id="'model0' + category.id">{{category.name}}</h3>


					<a :href="'/list.html?category_id=' + category.id" class="goods_more fr">查看更多 &gt;</a>
				</div>

				<div class="goods_con clearfix">
					<div class="goods_banner fl">
						<img :src="category.imgUrl" />
					</div>

					<ul class="goods_list fl">
						<li v-for="product in category.products">
							<h4><a :href="'/html/detail.html?id=' + product.id">{{product.name}}</a></h4>

							<a :href="'/html/detail.html?id=' + product.id">
								<img :src="product.imgUrl" />
							</a>

							<div class="prize">¥ {{product.price}}</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="/js/vue.js"></script>
		<script src="/js/element.js"></script>
		<script src="/js/axios.min.js"></script>
		<script src="/js/index.js"></script>
	</body>
</html>
